<template>
  <div class="loyaltyAnalysis">
    <el-tooltip effect="dark" :content="$t('newSearchResult.clear')" placement="left">
      <div class="reset" @click="resetAll">
        <i class="iconfont icon-saoba"></i>
      </div>
    </el-tooltip>
    <!--<div class="select-dimension">-->
      <!--<el-card>-->
        <!--<el-row class="class-row">-->
          <!--<el-col :span="2"><span class="class-title">{{$t('historical.AreaDivision')}}</span></el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="geoValue"-->
              <!--@change="changeAccountGeo"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Geo">-->
              <!--<el-option-->
                <!--v-for="item in geoData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="regionValue"-->
              <!--@change="changeAccountRegion"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Region">-->
              <!--<el-option-->
                <!--v-for="item in regionData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="countryValue"-->
              <!--@change="changeAccountCountry"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Country">-->
              <!--<el-option-->
                <!--v-for="item in countryData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row class="class-row">-->
          <!--<el-col :span="2"><span class="class-title">{{$t('historical.Customer')}}</span></el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="segmentValue"-->
              <!--@change="changeAccountSegment"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Segment">-->
              <!--<el-option-->
                <!--v-for="item in segmentOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="industryValue"-->
              <!--@change="changeAccountIndustry"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Industry">-->
              <!--<el-option-->
                <!--v-for="item in industryOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="scaleValue"-->
              <!--@change="changeAccountScale"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Scale">-->
              <!--<el-option-->
                <!--v-for="item in scaleOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="rfmValue"-->
              <!--@change="changeAccountRfm"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="RFM">-->
              <!--<el-option-->
                <!--v-for="item in rfmOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row class="class-row">-->
          <!--<el-col :span="2"><span class="class-title">{{$t('historical.Product')}}</span></el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="pgValue"-->
              <!--@change="changeAccountPg"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="PG">-->
              <!--<el-option-->
                <!--v-for="item in pgData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="finalBuValue"-->
              <!--@change="changeAccountFinalBu"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Fianl_Bu">-->
              <!--<el-option-->
                <!--v-for="item in finalBuData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="brandValue"-->
              <!--@change="changeAccountBrand"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Brand">-->
              <!--<el-option-->
                <!--v-for="item in brandData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
          <!--<el-col :span="3">-->
            <!--<el-select-->
              <!--v-model="seriesValue"-->
              <!--@change="changeAccountSeries"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--style="margin-left: 20px;"-->
              <!--placeholder="Series">-->
              <!--<el-option-->
                <!--v-for="item in seriesData"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</el-card>-->
    <!--</div>-->
    <div class="select-dimension">
      <el-card>
        <div class="class-row">
          <div class="class-columns">
            <div class="class-column">
              <span class="selectName">{{$t('select.Geo')}}</span>
              <el-select
                v-model="geoValue"
                @change="changeAccountGeo"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in geoData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="class-column">
              <span class="selectName">{{$t('select.Region')}}</span>
              <el-select
                v-model="regionValue"
                @change="changeAccountRegion"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in regionData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="class-column">
              <span class="selectName">{{$t('select.Country')}}</span>
              <el-select
                v-model="countryValue"
                @change="changeAccountCountry"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in countryData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="class-column">
              <span class="selectName">{{$t('select.BG')}}</span>
              <el-select
                v-model="pgValue"
                @change="changeAccountPg"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in pgData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="class-column">
              <span class="selectName">{{$t('select.Segment')}}</span>
              <el-select
                v-model="segmentValue"
                @change="changeAccountSegment"
                multiple
                collapse-tags
                style="margin-left: 5px;">
                <el-option
                  v-for="item in segmentOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="main-content">
      <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
        <!--<el-tab-pane :label="$t('loyaltyAnalysis.ChannelPartner')" name="BP"></el-tab-pane>-->
        <!--<el-tab-pane :label="$t('loyaltyAnalysis.CommercialCustomer')" name="Customer"></el-tab-pane>-->
      <!--</el-tabs>-->
      <h2 class="module-title">{{$t('loyaltyAnalysis.GeneralTrend')}}</h2>
      <el-card>
        <el-row>
          <el-col :span="12">
            <h3>{{$t('loyaltyAnalysis.Qty')}}</h3>
            <div class="nodata" v-if="showNoData.noData1">No Data</div>
            <div id="Echart1" class="echart-style" v-loading="loading.Echart1"></div>
          </el-col>
          <el-col :span="12">
            <h3>{{$t('loyaltyAnalysis.CA')}}</h3>
            <div class="nodata" v-if="showNoData.noData31">No Data</div>
            <div id="Echart31" class="echart-style" v-loading="loading.Echart31"></div>
          </el-col>
          <el-col :span="12">
            <h3>{{$t('loyaltyAnalysis.Rev')}}</h3>
            <div class="nodata" v-if="showNoData.noData2">No Data</div>
            <div id="Echart2" class="echart-style" v-loading="loading.Echart2"></div>
          </el-col>
          <el-col :span="12">
            <h3>{{$t('loyaltyAnalysis.GP')}}</h3>
            <div class="nodata" v-if="showNoData.noData3">No Data</div>
            <div id="Echart3" class="echart-style" v-loading="loading.Echart3"></div>
          </el-col>
        </el-row>
      </el-card>
      <!--<h2 class="module-title">{{$t('loyaltyAnalysis.ConfigurationComparison')}}</h2>-->
      <!--<el-card class="locationRadio">-->
        <!--<el-row style="text-align: center;">-->
          <!--<el-col :span="22" :offset="1">-->
            <!--<el-radio-group v-model="comparisonRadio" class="but-tab" size="mini" @change="changeComparisonRadio(comparisonRadio)">-->
              <!--&lt;!&ndash;<el-radio-button label="1">range</el-radio-button>&ndash;&gt;-->
              <!--<el-radio-button label="Geo">{{$t('loyaltyAnalysis.Geo')}}</el-radio-button>-->
              <!--<el-radio-button label="Segment">{{$t('loyaltyAnalysis.Segment')}}</el-radio-button>-->
              <!--&lt;!&ndash;<el-radio-button label="Industry">{{$t('loyaltyAnalysis.Industry')}}</el-radio-button>&ndash;&gt;-->
              <!--<el-radio-button label="GPSize">{{$t('loyaltyAnalysis.GPSize')}}</el-radio-button>-->
              <!--<el-radio-button label="RFM">{{$t('loyaltyAnalysis.RFM')}}</el-radio-button>-->
              <!--&lt;!&ndash; <i class="iconfont icon-information" style="color: #409eff;vertical-align: middle;cursor: pointer" @click="title=!title"></i> &ndash;&gt;-->
            <!--</el-radio-group>-->
            <!--<el-select v-model="comparisonYearValue" placeholder="Year" size="small"-->
                       <!--@change="changeComparisonYear"-->
                       <!--popper-class="comyear-select">-->
              <!--<el-option-->
                <!--v-for="item in comparisonYearOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row>-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('loyaltyAnalysis.Qty')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData4">No Data</div>-->
            <!--<div id="Echart4" class="echart-style" v-loading="loading.Echart4"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('loyaltyAnalysis.Rev')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData5">No Data</div>-->
            <!--<div id="Echart5" class="echart-style" v-loading="loading.Echart5"></div>-->
            <!--&lt;!&ndash;<div class="echart-style">&ndash;&gt;-->
              <!--&lt;!&ndash;<div id="Echart5"  v-loading="loading.Echart5"></div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('historical.GP')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData6">No Data</div>-->
            <!--<div id="Echart6" class="echart-style" v-loading="loading.Echart6"></div>-->
            <!--&lt;!&ndash;<div class="echart-style">&ndash;&gt;-->
              <!--&lt;!&ndash;<div id="Echart6"  v-loading="loading.Echart6"></div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--</el-col>-->
          <!--&lt;!&ndash;<span class="returnIconMiddle"  @click="clickMiddleReturnIcon"&ndash;&gt;-->
                <!--&lt;!&ndash;v-if="returnIconMiddle"><i class="icon iconfont icon-fanhui"></i>&ndash;&gt;-->
            <!--&lt;!&ndash;</span>&ndash;&gt;-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('historical.CA')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData61">No Data</div>-->
            <!--<div id="Echart61" class="echart-style" v-loading="loading.Echart61"></div>-->
            <!--&lt;!&ndash;<div class="echart-style">&ndash;&gt;-->
            <!--&lt;!&ndash;<div id="Echart6"  v-loading="loading.Echart6"></div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--</el-col>-->
          <!--&lt;!&ndash;<span class="returnIconMiddle"  @click="clickMiddleReturnIcon"&ndash;&gt;-->
          <!--&lt;!&ndash;v-if="returnIconMiddle"><i class="icon iconfont icon-fanhui"></i>&ndash;&gt;-->
          <!--&lt;!&ndash;</span>&ndash;&gt;-->
        <!--</el-row>-->
      <!--</el-card>-->
      <!--<h2 class="module-title">{{$t('loyaltyAnalysis.Preference')}}</h2>-->
      <!--<el-card>-->
        <!--<el-row>-->
          <!--<el-col :span="2" :offset="11">-->
            <!--<el-select v-model="productYearValue" placeholder="Year" size="small"-->
                       <!--@change="changeProductYear"-->
                       <!--popper-class="comyear-select" style="width:105px;">-->
              <!--<el-option-->
                <!--v-for="item in productYearOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row>-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('loyaltyAnalysis.Qty')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData7">No Data</div>-->
            <!--<div id="Echart7" class="echart-style" v-loading="loading.Echart7"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('loyaltyAnalysis.Rev')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData8">No Data</div>-->
            <!--<div id="Echart8" class="echart-style" v-loading="loading.Echart8"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('historical.GP')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData9">No Data</div>-->
            <!--<div id="Echart9" class="echart-style" v-loading="loading.Echart9"></div>-->
          <!--</el-col>-->
          <!--&lt;!&ndash;<span class="returnIconBottom"  @click="clickBottomReturnIcon"&ndash;&gt;-->
                <!--&lt;!&ndash;v-if="returnIconBottom"><i class="icon iconfont icon-fanhui"></i>&ndash;&gt;-->
            <!--&lt;!&ndash;</span>&ndash;&gt;-->
          <!--<el-col :span="12">-->
            <!--<h3>{{$t('historical.CA')}}</h3>-->
            <!--<div class="nodata" v-if="showNoData.noData91">No Data</div>-->
            <!--<div id="Echart91" class="echart-style" v-loading="loading.Echart91"></div>-->
          <!--</el-col>-->
          <!--&lt;!&ndash;<span class="returnIconBottom"  @click="clickBottomReturnIcon"&ndash;&gt;-->
          <!--&lt;!&ndash;v-if="returnIconBottom"><i class="icon iconfont icon-fanhui"></i>&ndash;&gt;-->
          <!--&lt;!&ndash;</span>&ndash;&gt;-->
        <!--</el-row>-->
      <!--</el-card>-->
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from '../../utils/auth'
  export default {
    name: 'LoyaltyAnalysis',
    data() {
      return {
        showNoData: {
          noData1: false,
          noData2: false,
          noData3: false,
          noData31: false,
          noData4: false,
          noData5: false,
          noData6: false,
          noData61: false,
          noData7: false,
          noData8: false,
          noData9: false,
          noData91: false
        },
        testPort: '', // http://10.116.38.238:8082
        geoData: [],
        geoValue: [],
        regionData: [],
        regionValue: [],
        countryData: [],
        countryValue: [],
        segmentValue: [],
        segmentOptions: [],
        industryValue: [],
        industryOptions: [],
        scaleValue: [],
        scaleOptions: [],
        rfmValue: [],
        rfmOptions: [],
        pgData: [],
        pgValue: [],
        finalBuData: [],
        finalBuValue: [],
        brandData: [],
        brandValue: [],
        seriesData: [],
        seriesValue: [],
        // activeName: 'BP',
        activeName: '',//合并BP和Commercial Customer数据
        echartsObj: {
          Echart1: null,
          Echart2: null,
          Echart3: null,
          Echart4: null,
          Echart5: null,
          Echart6: null,
          Echart7: null,
          Echart8: null,
          Echart9: null
        },
        ChartColor: ['#3d62f2', '#913af6', '#47a7f8', '#69e3f2', '#9f37c1', '#d73ffd', '#f08351', '#c24039', '#78ebe0', '#2bd2b8', '#ffc801', '#ffe403', '#ec5fa8', '#c2398d'],
        comparisonRadio: 'Geo',
        comparisonYearValue: '2017',
        comparisonYearOptions: [
          {
            value: '2014',
            label: 'FY1415'
          }, {
            value: '2015',
            label: 'FY1516'
          }, {
            value: '2016',
            label: 'FY1617'
          }, {
            value: '2017',
            label: 'FY1718'
          }, {
            value: '2018',
            label: 'FY1819'
          }
        ],
        Echart4Data: [],
        Echart5Data: [],
        Echart6Data: [],
        Echart61Data: [],
        Echart4DrillData: [],
        Echart5DrillData: [],
        Echart6DrillData: [],
        Echart61DrillData: [],
        productYearValue: '2017',
        productYearOptions: [
          {
            value: '2014',
            label: 'FY1415'
          }, {
            value: '2015',
            label: 'FY1516'
          }, {
            value: '2016',
            label: 'FY1617'
          }, {
            value: '2017',
            label: 'FY1718'
          }, {
            value: '2018',
            label: 'FY1819'
          }
        ],
        paramsSet: {
          form_fis_quarter: '201401',
          fis_year1: [],
          fis_year2: [],
          location_type: ''
        },
        loading: {
          Echart1: false,
          Echart2: false,
          Echart3: false,
          Echart31: false,
          Echart4: false,
          Echart5: false,
          Echart6: false,
          Echart61: false,
          Echart7: false,
          Echart8: false,
          Echart9: false,
          Echart91: false
        },
        errorInfo: {
          color: '#fff',
          text: 'NO DATA',
          textColor: '#000',
          maskColor: '#fff'
        },
        returnIconMiddle: false,  // 钻去后的返回icon
        countIconMiddle: 0, // 钻去后的返回icon计数器
        returnIconBottom: false,  // 钻去后的返回icon
        countIconBottom: 0 // 钻去后的返回icon计数器
      }
    },
    methods: {
      comdify(n) {
        var re = /\d{1,3}(?=(\d{3})+$)/g;
        var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {
        return s1.replace(re, "$&,") + s2
      })
        return n1
     },
  resetAll() {
        this.geoValue = []
        this.regionValue = []
        this.countryValue = []
        this.segmentValue = []
        this.industryValue = []
        this.scaleValue = []
        this.rfmValue = []
        this.pgValue = []
        this.finalBuValue = []
        this.brandValue = []
        this.seriesValue = []
        this.loadAllSelect()
        this.handleClick()
      },
      // 下拉框接口
      loadGeo() {
        const _this = this
        this.axios.post('/dropSelect/geoSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var datas = resData.geo.map(item => ({value: item, label: item, disabled: false}))
            _this.geoData = datas
          }
        })
      },
      loadRegion() {
        const _this = this
        this.axios.post('/dropSelect/regionSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var datas = resData.region.map(item => ({value: item, label: item, disabled: false}))
            _this.regionData = datas
          }
        })
      },
      loadCountry() {
        const _this = this
        this.axios.post('/dropSelect/countrySelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var datas = resData.country.map(item => ({value: item, label: item, disabled: false}))
            _this.countryData = datas
          }
        })
      },
      loadProduct() {
        const _this = this
        // this.axios.post('/dropSelect/productSelect.do', {
        // 临时删除MBG 的新接口 bgSelect.do
        this.axios.post('/dropSelect/bgSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            var pgDatas = resData.map(item => ({value: item, label: item, disabled: false}))
            // var finalBuDatas = resData.final_bu.map(item => ({value: item, label: item, disabled: false}))
            // var brandDatas = resData.brand.map(item => ({value: item, label: item, disabled: false}))
            // var seriesDatas = resData.series.map(item => ({value: item, label: item, disabled: false}))
            // var phProductDatas = resData.ph_product.map(item => ({value: item, label: item, disabled: false}))
            _this.pgData = pgDatas
            // _this.finalBuData = finalBuDatas
            // _this.brandData = brandDatas
            // _this.seriesData = seriesDatas
            // _this.phProductData = phProductDatas
          }
        })
      },
      loadCustomer(){
        const _this = this
        this.axios.post('/dropSelect/customerSelect.do', {
          username: getUsername()
        }).then(res => {
          if (res.status === 200) {
            var resData = res.data.data
            this.customerData = JSON.parse(sessionStorage.getItem('customerData'))
            var segmentDatas = resData.segment.map(item => ({value: item, label: item, disabled: false}))
            var industryDatas = resData.industry.map(item => ({value: item, label: item, disabled: false}))
            var scaleDatas = resData.scale.map(item => ({value: item, label: item, disabled: false}))
            var rfmDatas = resData.rfm.map(item => ({value: item, label: item, disabled: false}))
            _this.segmentOptions = segmentDatas
            _this.industryOptions = industryDatas
            _this.scaleOptions = scaleDatas
            _this.rfmOptions = rfmDatas
          }
        })
      },
      loadAllSelect(){
        this.loadGeo()
        this.loadRegion()
        this.loadCountry()
        this.loadCustomer()
        this.loadProduct()
      },
      // 下拉框联动
      changeAccountGeo() {
        const _this = this
        this.axios.post('/dropSelect/geoSelect.do',{
          username: getUsername(),
          geos: this.geoValue
        }).then(res =>{
          if (res.status === 200) {
            _this.regionData = []
            _this.regionValue = []
            _this.countryData = []
            _this.countryValue = []
            var resData = res.data.data
            if (resData.region) {
              _this.regionData = resData.region.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadRegion()
            }
            if (resData.country) {
              _this.countryData = resData.country.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCountry()
            }
            _this.getTopEcharts(this.params(this.activeName))
            // _this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // _this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountRegion() {
        const _this = this
        this.axios.post('/dropSelect/regionSelect.do', {
          username: getUsername(),
          regions: this.regionValue
        }).then(res =>{
          if (res.status === 200) {
            _this.countryData = []
            _this.countryValue = []
            var resData = res.data.data
            if (resData.country) {
              _this.countryData = resData.country.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCountry()
            }
            _this.getTopEcharts(this.params(this.activeName))
            // _this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // _this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountCountry() {
        const _this = this
        this.axios.post('/dropSelect/countrySelect.do',{
          username: getUsername(),
          countrys: this.countryValue
        }).then(res =>{
          if (res.status === 200) {
            _this.getTopEcharts(this.params(this.activeName))
            // _this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // _this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountSegment(){
        const _this = this
        this.axios.post('/dropSelect/customerSelect.do',{
          username: getUsername(),
          segment: this.segmentValue
        }).then(res => {
          if (res.status === 200) {
            _this.industryOptions = []
            _this.industryValue = []
            _this.scaleOptions = []
            _this.scaleValue = []
            _this.rfmOptions = []
            _this.rfmValue = []
            var resData = res.data.data
            if (resData.industry) {
              _this.industryOptions = resData.industry.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCustomer()
            }
            if (resData.scale) {
              _this.scaleOptions = resData.scale.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCustomer()
            }
            if (resData.rfm) {
              _this.rfmOptions = resData.rfm.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCustomer()
            }
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountIndustry(){
        const _this = this
        this.axios.post('/dropSelect/customerSelect.do',{
          username: getUsername(),
          industry: this.industryValue
        }).then(res => {
          if (res.status === 200) {
            _this.scaleOptions = []
            _this.scaleValue = []
            _this.rfmOptions = []
            _this.rfmValue = []
            var resData = res.data.data
            if (resData.scale) {
              _this.scaleOptions = resData.scale.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCustomer()
            }
            if (resData.rfm) {
              _this.rfmOptions = resData.rfm.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCustomer()
            }
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountScale(){
        const _this = this
        this.axios.post('/dropSelect/customerSelect.do',{
          username: getUsername(),
          scale: this.scaleValue
        }).then(res => {
          if (res.status === 200) {
            _this.rfmOptions = []
            _this.rfmValue = []
            var resData = res.data.data
            if (resData.rfm) {
              _this.rfmOptions = resData.rfm.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadCustomer()
            }
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountRfm(){
        this.axios.post('/dropSelect/customerSelect.do',{
          username: getUsername(),
          rfm: this.rfmValue
        }).then(res => {
          if (res.status === 200) {
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountPg(){
        const _this = this
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          pg: this.pgValue
        }).then(res => {
          if (res.status === 200) {
            _this.finalBuData = []
            _this.finalBuValue = []
            _this.brandData = []
            _this.brandValue = []
            _this.seriesData = []
            _this.seriesValue = []
            var resData = res.data.data
            if (resData.final_bu) {
              _this.finalBuData = resData.final_bu.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            if (resData.brand) {
              _this.brandData = resData.brand.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            if (resData.series) {
              _this.seriesData = resData.series.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountFinalBu(){
        const _this = this
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          final_bu: this.finalBuValue
        }).then(res => {
          if (res.status === 200) {
            _this.brandData = []
            _this.brandValue = []
            _this.seriesData = []
            _this.seriesValue = []
            var resData = res.data.data
            if (resData.brand) {
              _this.brandData = resData.brand.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            if (resData.series) {
              _this.seriesData = resData.series.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountBrand(){
        const _this = this
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          brand: this.brandValue
        }).then(res => {
          if (res.status === 200) {
            _this.seriesData = []
            _this.seriesValue = []
            var resData = res.data.data
            if (resData.series) {
              _this.seriesData = resData.series.map(item => ({value: item, label: item, disabled: false}))
            } else {
              _this.loadProduct()
            }
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      changeAccountSeries(){
        this.axios.post('/dropSelect/productSelect.do',{
          username: getUsername(),
          series: this.seriesValue
        }).then(res => {
          if (res.status === 200) {
            this.getTopEcharts(this.params(this.activeName))
            // this.getMiddleEcharts(this.paramsLocation(this.activeName))
            // this.getBottomEcharts(this.paramsProduct(this.activeName))
          }
        })
      },
      // 获取图表DOM对象
      initEchartsDom(){
        this.echartsObj.Echart1 = this.echarts.init(document.getElementById('Echart1'), null, { renderer: 'canvas' })
        this.echartsObj.Echart2 = this.echarts.init(document.getElementById('Echart2'), null, { renderer: 'canvas' })
        this.echartsObj.Echart3 = this.echarts.init(document.getElementById('Echart3'), null, { renderer: 'canvas' })
        this.echartsObj.Echart31 = this.echarts.init(document.getElementById('Echart31'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart4 = this.echarts.init(document.getElementById('Echart4'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart5 = this.echarts.init(document.getElementById('Echart5'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart6 = this.echarts.init(document.getElementById('Echart6'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart61 = this.echarts.init(document.getElementById('Echart61'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart7 = this.echarts.init(document.getElementById('Echart7'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart8 = this.echarts.init(document.getElementById('Echart8'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart9 = this.echarts.init(document.getElementById('Echart9'), null, { renderer: 'canvas' })
        // this.echartsObj.Echart91 = this.echarts.init(document.getElementById('Echart91'), null, { renderer: 'canvas' })
      },
      // 入参函数定义
      // params-前三图表；paramsLocation-中三图表；paramsProduct-后三图表
      params(bp_category){
        return {
          form_fis_quarter: this.paramsSet.form_fis_quarter,
          username: getUsername(),
          bp_category: bp_category,
          geo: this.geoValue,
          region: this.regionValue,
          country_code: this.countryValue,
          segment: this.segmentValue,
          industry: this.industryValue,
          bp_scale: this.scaleValue,
          pg: this.pgValue,
          rfm: this.rfmValue,
          final_bu: this.finalBuValue,
          brand: this.brandValue,
          series: this.seriesValue
        }
      },
      paramsLocation(bp_category,location_type = 'geo'){
        return {
          form_fis_quarter: this.paramsSet.form_fis_quarter,
          username: getUsername(),
          bp_category: bp_category,
          geo: this.geoValue,
          region: this.regionValue,
          country_code: this.countryValue,
          segment: this.segmentValue,
          industry: this.industryValue,
          bp_scale: this.scaleValue,
          pg: this.pgValue,
          rfm: this.rfmValue,
          final_bu: this.finalBuValue,
          brand: this.brandValue,
          series: this.seriesValue,
          fis_year: [this.comparisonYearValue],
          location_type: location_type
        }
      },
      paramsProduct(bp_category,product_type = 'biz_group'){
        return {
          form_fis_quarter: this.paramsSet.form_fis_quarter,
          username: getUsername(),
          bp_category: bp_category,
          geo: this.geoValue,
          region: this.regionValue,
          country_code: this.countryValue,
          segment: this.segmentValue,
          industry: this.industryValue,
          bp_scale: this.scaleValue,
          pg: this.pgValue,
          rfm: this.rfmValue,
          final_bu: this.finalBuValue,
          brand: this.brandValue,
          series: this.seriesValue,
          fis_year: [this.productYearValue],
          product_type: product_type
        }
      },
      // 前三图表
      async showEchart1(param) {
        const _this = this
        try {
          this.loading.Echart1 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendQty.do`, param)
          if (res.data.data.name.length !== 0) {
            console.log(res, 'res1212');
            let revMixData = res.data.data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.echartsObj.Echart1.clear()
            this.showNoData.noData1 = false
            this.echartsObj.Echart1.setOption(option)
          } else {
            this.echartsObj.Echart1.clear()
            this.showNoData.noData1 = true
            // this.echartsObj.Echart1.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.echartsObj.Echart1.clear()
          this.showNoData.noData1 = true
          // this.echartsObj.Echart1.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart1 = false
      },
      async showEchart2(param) {
        const _this = this
        try {
          this.loading.Echart2 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendRev.do`, param)
          if (res.data.data.name.length !== 0) {
            let revMixData = res.data.data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                name : '($K)',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.echartsObj.Echart2.clear()
            this.showNoData.noData2 = false
            this.echartsObj.Echart2.setOption(option)
          } else {
            this.echartsObj.Echart2.clear()
            this.showNoData.noData2 = true
            // this.echartsObj.Echart2.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.echartsObj.Echart2.clear()
          this.showNoData.noData2 = true
          // this.echartsObj.Echart2.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart2 = false
      },
      async showEchart3(param) {
        const _this = this
        try {
          this.loading.Echart3 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendGp.do`, param)
          if (res.data.data.name.length !== 0) {
            let revMixData = res.data.data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.lin.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                name : '($K)',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.echartsObj.Echart3.clear()
            this.showNoData.noData3 = false
            this.echartsObj.Echart3.setOption(option)
          } else {
            this.echartsObj.Echart3.clear()
            this.showNoData.noData3 = true
            // this.echartsObj.Echart3.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.echartsObj.Echart3.clear()
          this.showNoData.noData3 = true
          // this.echartsObj.Echart3.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart3 = false
      },
      // 千分位处理
      comdify(n) {
        var re = /\d{1,3}(?=(\d{3})+$)/g;
        var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
          return s1.replace(re, "$&,") + s2
        })
        return n1
      },
      // async showEchart3(param) {
      //   const _this = this
      //   try {
      //     this.loading.Echart3 = true
      //     const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
      //     let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendGp.do`,param)
      //     if (res.data.data.name.length !== 0) {
      //       let gpData = res.data.data
      //       let xAxisData = gpData.name
      //       let legendData = []
      //       let gpLine = gpData.lin.value
      //       let gpLineData = []
      //       let colorStops = []
      //       let k = 0
      //       for (let i in gpLine) {
      //         legendData.push(gpLine[i])
      //         colorStops = [
      //           {offset: 0, color: this.ChartColor[k]},
      //           {offset: 1, color: this.ChartColor[k + 1]}
      //         ]
      //         gpLineData.push({
      //           name: gpLine[i].name,
      //           data: gpLine[i].value,
      //           type: 'line',
      //           // stack: i,
      //           smooth: true,
      //           smoothMonotone: 'none',
      //           lineStyle: {
      //             normal: {
      //               width: 2,
      //               // shadowColor: this.ChartColor[k],
      //               // opactity: 0.5,
      //               // shadowBlur: 12,
      //               // shadowOffsetX: 0,
      //               // shadowOffsetY: 5
      //             }
      //           }
      //         })
      //         k += 2
      //         if (k > this.ChartColor.length) {
      //           k = 0
      //         }
      //       }
      //       let option = {
      //         color: colorList,
      //         tooltip: {
      //           confine: true,
      //           trigger: 'axis',
      //           formatter: function (params) {
      //             let item = params[0].name + '<br/>'
      //             for (let i in params) {
      //               item += params[i].seriesName + ': ' + _this.comdify((params[i].value).toString()) + '<br />'
      //             }
      //             return item
      //           },
      //           axisPointer: {
      //             lineStyle: {
      //               color: '#f5f5f9'
      //             }
      //           },
      //           backgroundColor: 'rgba(255,255,255,1)',
      //           padding: [5, 10],
      //           textStyle: {
      //             color: '#7588E4'
      //           },
      //           extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
      //         },
      //         legend: {
      //           itemWidth: 8,
      //           itemHeight: 12,
      //           data: legendData
      //         },
      //         grid: {
      //           left: '3%',
      //           right: '3%',
      //           bottom: '3%',
      //           containLabel: true
      //         },
      //         xAxis: {
      //           type: 'category',
      //           boundaryGap: true,
      //           axisLine: {
      //             show: false
      //           },
      //           axisTick: {
      //             show: false
      //           },
      //           axisLabel: {
      //             rotate: 45,
      //             interval: 0,
      //             fontSize: 9,
      //             color: '#959eaf'
      //           },
      //           data: xAxisData
      //         },
      //         yAxis: {
      //           type: 'value',
      //           // min: '-10',
      //           axisLine: {
      //             show: false
      //           },
      //           axisTick: {
      //             show: false
      //           },
      //           axisLabel: {
      //             fontSize: 9,
      //             color: '#959eaf',
      //            formatter: '{value}'
      //           },
      //           splitLine: {
      //             lineStyle: {
      //               color: ['#f5f5f9']
      //             }
      //           }
      //         },
      //         series: gpLineData
      //       }
      //       this.echartsObj.Echart3.clear()
      //       this.showNoData.noData3 = false
      //       this.echartsObj.Echart3.setOption(option)
      //     } else {
      //       this.echartsObj.Echart3.clear()
      //       this.showNoData.noData3 = true
      //       // this.echartsObj.Echart3.showLoading('default', _this.errorInfo)
      //     }
      //   } catch (error){
      //     console.log(error)
      //     this.echartsObj.Echart3.clear()
      //     this.showNoData.noData3 = true
      //     // this.echartsObj.Echart3.showLoading('default', _this.errorInfo)
      //   }
      //   this.loading.Echart3 = false
      // },
      async showEchart31(param) {
        const _this = this
        try {
          this.loading.Echart3 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendCa.do`,param)
          // let res = await this.axios.post(`http://10.116.38.238:8082/loyaltyanalysis/cLoyaltyTrendCa.do`,param)
          if (res.data.data.name.length !== 0) {
            let revMixData = res.data.data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.echartsObj.Echart31.clear()
            this.showNoData.noData31 = false
            this.echartsObj.Echart31.setOption(option)
          } else {
            this.echartsObj.Echart31.clear()
            this.showNoData.noData31 = true
            // this.echartsObj.Echart31.showLoading('default', _this.errorInfo)
          }
        } catch (error){
          console.log(error)
          this.echartsObj.Echart31.clear()
          this.showNoData.noData31 = true
          // this.echartsObj.Echart31.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart31 = false
      },
      // 中三图表初始化切换，渲染及下钻
      async showEchart4(paramsLocation) {
        this.loading.Echart4 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonQty.do`,paramsLocation)
        this.Echart4Data = res.data.data
        if(this.comparisonRadio === 'Geo'){
          this.loadEchart4( this.Echart4Data.geo)
        } else if (this.comparisonRadio === 'Segment'){
          this.loadEchart4( this.Echart4Data.segment)
        } else if (this.comparisonRadio === 'Industry'){
          this.loadEchart4( this.Echart4Data.industry)
        } else if (this.comparisonRadio === 'GPSize'){
          this.loadEchart4( this.Echart4Data.scale)
        } else if (this.comparisonRadio === 'RFM'){
          this.loadEchart4( this.Echart4Data.rfm)
        }
      },
      loadEchart4(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0) {
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          let legendData = []
          let barData1 = []
          for (let i in barData) {
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              barMaxWidth: 14,
              stack: 'sum'
            })
          }
          let option = {
            color: colorList,
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + _this.comdify((params[i].value).toString()) + '<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            grid: {
              left: '3%',
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                rotate: 45,
                // interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 9,
                color: '#959eaf'
              }
            },
            series: barData1
          }
          this.showNoData.noData4 = false
          this.echartsObj.Echart4.clear()
          this.echartsObj.Echart4.setOption(option)
        } else {
          this.echartsObj.Echart4.clear()
          this.showNoData.noData4 = true
          // this.echartsObj.Echart4.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart4 = false
      },
      async drillEchart4(paramsLocation) {
        const _this = this
        this.loading.Echart4 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonQty.do`,paramsLocation)
        this.Echart4DrillData = res.data.data
        if(paramsLocation.location_type.length !== 0){
          _this.loadEchart4( this.Echart4DrillData[paramsLocation.location_type])
        }
      },
      async showEchart5(paramsLocation) {
        this.loading.Echart5 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonRev.do`, paramsLocation)
        this.Echart5Data = res.data.data
        if(this.comparisonRadio === 'Geo'){
          this.loadEchart5( this.Echart5Data.geo)
        } else if (this.comparisonRadio === 'Segment'){
          this.loadEchart5( this.Echart5Data.segment)
        } else if (this.comparisonRadio === 'Industry'){
          this.loadEchart5( this.Echart5Data.industry)
        } else if (this.comparisonRadio === 'GPSize'){
          this.loadEchart5( this.Echart5Data.scale)
        } else if (this.comparisonRadio === 'RFM'){
          this.loadEchart5( this.Echart5Data.rfm)
        }
      },
      loadEchart5(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0) {
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          // let barWidth = 15
          // let bars = xAxisData.length
          // let Echart5 = document.getElementById('Echart5')
          // Echart5.style.width = (bars * barWidth) + 'px'
          let legendData = []
          let barData1 = []
          for (let i in barData) {
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              barMaxWidth: 15,
              stack: 'sum'
            })
          }
          let option = {
            color: colorList,
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + _this.comdify((params[i].value).toString()) + '<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E5'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(225,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            grid: {
              left: '3%',
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLabel: {
                rotate: 55,
                // interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 9,
                color: '#959eaf'
              }
            },
            series: barData1
          }
          this.showNoData.noData5 = false
          this.echartsObj.Echart5.clear()
          this.echartsObj.Echart5.setOption(option)
        } else {
          this.echartsObj.Echart5.clear()
          this.showNoData.noData5 = true
          // this.echartsObj.Echart5.showLoading('default',_this.errorInfo)
        }
        this.loading.Echart5 = false
      },
      async drillEchart5(paramsLocation) {
        const _this = this
        this.loading.Echart5 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonRev.do`,paramsLocation)
        this.Echart5DrillData = res.data.data
        if(paramsLocation.location_type.length !== 0){
          _this.loadEchart5( this.Echart5DrillData[paramsLocation.location_type])
        }
      },
      async showEchart6(paramsLocation) {
        this.loading.Echart6 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonGp.do`,paramsLocation)
        this.Echart6Data = res.data.data
        if(this.comparisonRadio === 'Geo'){
          this.loadEchart6( this.Echart6Data.geo)
        } else if (this.comparisonRadio === 'Segment'){
          this.loadEchart6( this.Echart6Data.segment)
        } else if (this.comparisonRadio === 'Industry'){
          this.loadEchart6( this.Echart6Data.industry)
        } else if (this.comparisonRadio === 'GPSize'){
          this.loadEchart6( this.Echart6Data.scale)
        } else if (this.comparisonRadio === 'RFM'){
          this.loadEchart6( this.Echart6Data.rfm)
        }
      },
      loadEchart6(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0) {
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          // let Echart6 = document.getElementById('Echart6')
          // let barWidth = 15
          // let bars = (xAxisData.length) * (barData.length)
          // Echart6.style.width = (bars * barWidth) + 'px'
          let legendData = []
          let barData1 = []
          let colorStops = []
          let k = 0
          for (let i in barData) {
            colorStops = [
              {offset: 0, color: this.ChartColor[k]},
              {offset: 1, color: this.ChartColor[k + 1]}
            ]
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              stack: 'sum',
              barMaxWidth: 10,
              barGap: 0,
              // lineStyle: {
              //   normal: {
              //     width: 2,
              //     shadowColor: this.ChartColor[k],
              //     opactity: 0.5,
              //     shadowBlur: 12,
              //     shadowOffsetX: 0,
              //     shadowOffsetY: 5
              //   }
              // },
              // itemStyle: {
              //   normal: {
              //     color: {
              //       type: 'linear',
              //       x: 0,
              //       y: 0,
              //       x2: 0,
              //       y2: 1,
              //       colorStops: colorStops,
              //       globalCoord: false // 缺省为 false
              //     },
              //     barBorderRadius: [50, 50, 0, 0] //（顺时针左上，右上，右下，左下）
              //   },
              //   emphasis: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 0,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // }
            })
            k += 2
            if (k > this.ChartColor.length) {
              k = 0
            }
          }
          let option = {
            color: colorList,
            grid: {
              left: '3%',
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + _this.comdify((params[i].value).toString()) + '<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 45,
                // interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              // offset: 25,
              axisLine: {
                // symbolOffset: 5,
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: 9,
                color: '#959eaf',
                formatter: '{value}'
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            series: barData1
          }
          this.echartsObj.Echart6.clear()
          this.showNoData.noData6 = false
          this.echartsObj.Echart6.setOption(option)
        } else {
          this.echartsObj.Echart6.clear()
          this.showNoData.noData6 = true
          // this.echartsObj.Echart6.showLoading('default',_this.errorInfo)
        }
        this.loading.Echart6 = false
      },
      async drillEchart6(paramsLocation) {
        const _this = this
        this.loading.Echart6 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonRev.do`, paramsLocation)
        this.Echart6DrillData = res.data.data
        if(paramsLocation.location_type.length !== 0){
          _this.loadEchart6( this.Echart6DrillData[paramsLocation.location_type])
        }
      },
      async showEchart61(paramsLocation) {
        this.loading.Echart61 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonCa.do`,paramsLocation)
        this.Echart61Data = res.data.data
        if(this.comparisonRadio === 'Geo'){
          this.loadEchart61( this.Echart61Data.geo)
        } else if (this.comparisonRadio === 'Segment'){
          this.loadEchart61( this.Echart61Data.segment)
        } else if (this.comparisonRadio === 'Industry'){
          this.loadEchart61( this.Echart61Data.industry)
        } else if (this.comparisonRadio === 'GPSize'){
          this.loadEchart61( this.Echart61Data.scale)
        } else if (this.comparisonRadio === 'RFM'){
          this.loadEchart61( this.Echart61Data.rfm)
        }
      },
      loadEchart61(paramsData) {
        const _this = this
        if (paramsData.name.length !== 0) {
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let barData = paramsData.bar.value
          let xAxisData = paramsData.name
          let legendData = []
          let barData1 = []
          let colorStops = []
          let k = 0
          for (let i in barData) {
            colorStops = [
              {offset: 0, color: this.ChartColor[k]},
              {offset: 1, color: this.ChartColor[k + 1]}
            ]
            legendData.push(barData[i].name)
            barData1.push({
              name: barData[i].name,
              data: barData[i].value,
              type: 'bar',
              stack: 'sum',
              barMaxWidth: 10,
              barGap: 0,
              lineStyle: {
                normal: {
                  width: 2,
                  shadowColor: this.ChartColor[k],
                  opactity: 0.5,
                  shadowBlur: 12,
                  shadowOffsetX: 0,
                  shadowOffsetY: 5
                }
              },
              // itemStyle: {
              //   normal: {
              //     color: {
              //       type: 'linear',
              //       x: 0,
              //       y: 0,
              //       x2: 0,
              //       y2: 1,
              //       colorStops: colorStops,
              //       globalCoord: false // 缺省为 false
              //     },
              //     barBorderRadius: [50, 50, 0, 0] //（顺时针左上，右上，右下，左下）
              //   },
              //   emphasis: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 0,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // }
            })
            k += 2
            if (k > this.ChartColor.length) {
              k = 0
            }
          }
          let option = {
            color: colorList,
            grid: {
              left: 0,
              right: 0,
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              formatter: function (params) {
                let item = params[0].name + '<br/>'
                for (let i in params) {
                  item += params[i].seriesName + ': ' + _this.comdify((params[i].value).toString()) + '<br />'
                }
                return item
              },
              axisPointer: {
                lineStyle: {
                  color: '#f5f5f9'
                }
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              itemWidth: 10,
              itemHeight: 10,
              data: legendData
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 45,
                // interval: 0,
                fontSize: 9,
                color: '#959eaf'
              },
              data: xAxisData
            },
            yAxis: {
              min: 'dataMin',
              type: 'value',
              // offset: 25,
              axisLine: {
                // symbolOffset: 5,
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: 9,
                color: '#959eaf',
               formatter: '{value}'
              },
              splitLine: {
                lineStyle: {
                  color: ['#f5f5f9']
                }
              }
            },
            series: barData1
          }
          this.echartsObj.Echart61.clear()
          this.showNoData.noData61 = false
          this.echartsObj.Echart61.setOption(option)
        } else {
          this.echartsObj.Echart61.clear()
          this.showNoData.noData61 = true
          // this.echartsObj.Echart6.showLoading('default',_this.errorInfo)
        }
        this.loading.Echart61 = false
      },
      async drillEchart61(paramsLocation) {
        const _this = this
        this.loading.Echart61 = true
        let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyComparisonCa.do`, paramsLocation)
        this.Echart61DrillData = res.data.data
        if(paramsLocation.location_type.length !== 0){
          _this.loadEchart61( this.Echart61DrillData[paramsLocation.location_type])
        }
      },
      // 底下三个图表
      async showEchart7(paramsProduct) {
        const _this = this
        try {
          this.loading.Echart7 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyVspPreferenceQty.do`, paramsProduct)
          if (res.data.data.name.length !== 0) {
            let revMixData = res.data.data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let barData = revMixData.bar.value
            let legendData = []
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 14,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.echartsObj.Echart7.clear()
            this.showNoData.noData7 = false
            this.echartsObj.Echart7.setOption(option)
          }else {
            this.echartsObj.Echart7.clear()
            this.showNoData.noData7 = true
            // this.echartsObj.Echart7.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.echartsObj.Echart7.clear()
          this.showNoData.noData7 = true
          // this.echartsObj.Echart7.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart7 = false
      },
      async showEchart8(paramsProduct) {
        const _this = this
        try {
          this.loading.Echart8 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyVspPreferenceRev.do`, paramsProduct)
          if (res.data.data.name.length !== 0) {
            let revMixData = res.data.data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let barData = revMixData.bar.value
            let legendData = []
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 14,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.showNoData.noData8 = false
            this.echartsObj.Echart8.clear()
            this.echartsObj.Echart8.setOption(option)
          } else {
            this.echartsObj.Echart8.clear()
            this.showNoData.noData8 = true
            // this.echartsObj.Echart8.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.echartsObj.Echart8.clear()
          this.echartsObj.Echart8.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart8 = false
      },
      async showEchart9(paramsProduct) {
        const _this = this
        try {
          this.loading.Echart9 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyVspPreferenceGp.do`, paramsProduct)
          if (res.data.data.name.length !== 0) {
            let gpData = res.data.data
            let xAxisData = gpData.name
            let gpBar = gpData.bar.value
            let legendData = []
            let gpBarData = []
            let colorStops = []
            let k = 0
            for (let i in gpBar) {
              colorStops = [
                {offset: 0, color: this.ChartColor[k]},
                {offset: 1, color: this.ChartColor[k + 1]}
              ]
              legendData.push(gpBar[i].name)
              gpBarData.push({
                name: gpBar[i].name,
                data: gpBar[i].value,
                type: 'bar',
                stack: 'sum',
                barMaxWidth: 10,
                barGap: 0,
                lineStyle: {
                  normal: {
                    width: 2,
                    shadowColor: this.ChartColor[k],
                    opactity: 0.5,
                    shadowBlur: 12,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5
                  }
                },
                // itemStyle: {
                //   normal: {
                //     color: {
                //       type: 'linear',
                //       x: 0,
                //       y: 0,
                //       x2: 0,
                //       y2: 1,
                //       colorStops: colorStops,
                //       globalCoord: false // 缺省为 false
                //     },
                //     barBorderRadius: [50, 50, 0, 0] //（顺时针左上，右上，右下，左下）
                //   },
                //   emphasis: {
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //   }
                // }
              })
              k += 2
              if (k > this.ChartColor.length) {
                k = 0
              }
            }
            let option = {
              color: colorList,
              grid: {
                left: 0,
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                 formatter: '{value}'
                },
                splitLine: {
                  lineStyle: {
                    color: ['#f5f5f9']
                  }
                }
              },
              series: gpBarData
            }
            this.showNoData.noData9 = false
            this.echartsObj.Echart9.clear()
            this.echartsObj.Echart9.setOption(option)
          } else {
            this.echartsObj.Echart9.clear()
            this.showNoData.noData9 = true
            // this.echartsObj.Echart9.showLoading('default', _this.errorInfo)
          }
        } catch (error){
          console.log(error)
          this.echartsObj.Echart9.clear()
          this.showNoData.noData9 = true
          // this.echartsObj.Echart9.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart9 = false
      },
      async showEchart91(paramsProduct) {
        const _this = this
        try {
          this.loading.Echart9 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyVspPreferenceCa.do`, paramsProduct)
          if (res.data.data.name.length !== 0) {
            let gpData = res.data.data
            let xAxisData = gpData.name
            let gpBar = gpData.bar.value
            let legendData = []
            let gpBarData = []
            let colorStops = []
            let k = 0
            for (let i in gpBar) {
              colorStops = [
                {offset: 0, color: this.ChartColor[k]},
                {offset: 1, color: this.ChartColor[k + 1]}
              ]
              legendData.push(gpBar[i].name)
              gpBarData.push({
                name: gpBar[i].name,
                data: gpBar[i].value,
                type: 'bar',
                stack: 'sum',
                barMaxWidth: 10,
                barGap: 0,
                lineStyle: {
                  normal: {
                    width: 2,
                    shadowColor: this.ChartColor[k],
                    opactity: 0.5,
                    shadowBlur: 12,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5
                  }
                },
                // itemStyle: {
                //   normal: {
                //     color: {
                //       type: 'linear',
                //       x: 0,
                //       y: 0,
                //       x2: 0,
                //       y2: 1,
                //       colorStops: colorStops,
                //       globalCoord: false // 缺省为 false
                //     },
                //     barBorderRadius: [50, 50, 0, 0] //（顺时针左上，右上，右下，左下）
                //   },
                //   emphasis: {
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //   }
                // }
              })
              k += 2
              if (k > this.ChartColor.length) {
                k = 0
              }
            }
            let option = {
              color: colorList,
              grid: {
                left: 0,
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              tooltip: {
                confine: true,
               trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                type: 'scroll',
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                 formatter: '{value}'
                },
                splitLine: {
                  lineStyle: {
                    color: ['#f5f5f9']
                  }
                }
              },
              series: gpBarData
            }
            this.showNoData.noData91 = false
            this.echartsObj.Echart91.clear()
            this.echartsObj.Echart91.setOption(option)
          } else {
            this.echartsObj.Echart91.clear()
            this.showNoData.noData91 = true
            // this.echartsObj.Echart91.showLoading('default', _this.errorInfo)
          }
        } catch (error){
          console.log(error)
          this.echartsObj.Echart91.clear()
          this.showNoData.noData91 = true
          // this.echartsObj.Echart91.showLoading('default', _this.errorInfo)
        }
        this.loading.Echart91 = false
      },
      // 初始化三部分图表
      getTopEcharts(params){
        this.showEchart1(params)
        this.showEchart2(params)
        this.showEchart3(params)
        this.showEchart31(params)
      },
      getMiddleEcharts(params){
        this.showEchart4(params)
        this.showEchart5(params)
        this.showEchart6(params)
        this.showEchart61(params)
      },
      getBottomEcharts(params){
        this.showEchart7(params)
        this.showEchart8(params)
        this.showEchart9(params)
        this.showEchart91(params)
      },
      echartsResize() {
        // 因为这个切换是EchartsDom先做的重置；然后Element才切换过去的，所以要设置定时器；保证先切换过去页面，再echatrts重置
        setTimeout(()=> {
          this.echartsObj.Echart1.resize()
          this.echartsObj.Echart2.resize()
          this.echartsObj.Echart3.resize()
          this.echartsObj.Echart31.resize()
          // _this.echartsObj.Echart4.resize()
          // _this.echartsObj.Echart5.resize()
          // _this.echartsObj.Echart6.resize()
          // _this.echartsObj.Echart61.resize()
          // _this.echartsObj.Echart7.resize()
          // _this.echartsObj.Echart8.resize()
          // _this.echartsObj.Echart9.resize()
          // _this.echartsObj.Echart91.resize()
        }, 200)
      },
      // 两大类切换
      handleClick(tab, event) {
        this.comparisonRadio = 'Geo'
        this.countIconMiddle = 0
        this.returnIconMiddle = false
        this.countIconBottom = 0
        this.returnIconBottom = false
        this.comparisonYearValue = '2017'
        this.productYearValue = '2017'
        this.getTopEcharts(this.params(this.activeName))
        // this.getMiddleEcharts(this.paramsLocation(this.activeName))
        // this.getBottomEcharts(this.paramsProduct(this.activeName))
        this.echartsResize()
      },
      // Comparison -5部分切换
      changeComparisonRadio() {
        this.returnIconMiddle = false
        this.countIconMiddle = 0
        if(this.comparisonRadio === 'Geo'){
          this.loadEchart4( this.Echart4Data.geo)
          this.loadEchart5( this.Echart5Data.geo)
          this.loadEchart6( this.Echart6Data.geo)
          this.loadEchart61( this.Echart6Data.geo)
        } else if (this.comparisonRadio === 'Segment'){
          this.loadEchart4( this.Echart4Data.segment)
          this.loadEchart5( this.Echart5Data.segment)
          this.loadEchart6( this.Echart6Data.segment)
          this.loadEchart61( this.Echart6Data.segment)
        } else if (this.comparisonRadio === 'Industry'){
          this.loadEchart4( this.Echart4Data.industry)
          this.loadEchart5( this.Echart5Data.industry)
          this.loadEchart6( this.Echart6Data.industry)
          this.loadEchart61( this.Echart6Data.industry)
        } else if (this.comparisonRadio === 'GPSize'){
          this.loadEchart4( this.Echart4Data.scale)
          this.loadEchart5( this.Echart5Data.scale)
          this.loadEchart6( this.Echart6Data.scale)
          this.loadEchart61( this.Echart6Data.scale)
        } else if (this.comparisonRadio === 'RFM'){
          this.loadEchart4( this.Echart4Data.rfm)
          this.loadEchart5( this.Echart5Data.rfm)
          this.loadEchart6( this.Echart6Data.rfm)
          this.loadEchart61( this.Echart6Data.rfm)
        }
      },
      // 下钻切换数据
      getMiddleDrillData(item){
        let _this = this
        if (_this.comparisonRadio === 'Geo') {
          _this.countIconMiddle ++
          _this.returnIconMiddle = true
          if (_this.countIconMiddle === 1) {
            _this.geoValue = [item]
            _this.drillEchart4(_this.paramsLocation(_this.activeName,'region'),'region')
            _this.drillEchart5(_this.paramsLocation(_this.activeName,'region'),'region')
            _this.drillEchart6(_this.paramsLocation(_this.activeName,'region'),'region')
            _this.drillEchart61(_this.paramsLocation(_this.activeName,'region'),'region')
            _this.getTopEcharts(_this.params(_this.activeName))
            _this.getBottomEcharts(_this.paramsProduct(_this.activeName))
          }
          if (_this.countIconMiddle === 2) {
            _this.regionValue = [item]
            _this.drillEchart4(_this.paramsLocation(_this.activeName,'country_code'),'country_code')
            _this.drillEchart5(_this.paramsLocation(_this.activeName,'country_code'),'country_code')
            _this.drillEchart6(_this.paramsLocation(_this.activeName,'country_code'),'country_code')
            _this.drillEchart61(_this.paramsLocation(_this.activeName,'country_code'),'country_code')
            _this.getTopEcharts(_this.params(_this.activeName))
            _this.getBottomEcharts(_this.paramsProduct(_this.activeName))
          }
          if (_this.countIconMiddle > 2) {
            _this.countIconMiddle = 2
          }
        }
      },
      getBottomDrillData(item){
        let _this = this
        _this.countIconBottom ++
        _this.returnIconBottom = true
        if (_this.countIconBottom === 1) {
          _this.pgValue = [item]
          _this.showEchart7(_this.paramsProduct(_this.activeName,'final_bu'))
          _this.showEchart8(_this.paramsProduct(_this.activeName,'final_bu'))
          _this.showEchart9(_this.paramsProduct(_this.activeName,'final_bu'))
          _this.showEchart91(_this.paramsProduct(_this.activeName,'final_bu'))
          _this.getTopEcharts(_this.params(_this.activeName))
          this.getMiddleEcharts(this.paramsLocation(this.activeName))
        }
        if(_this.countIconBottom === 2){
          _this.finalBuValue = [item]
          _this.showEchart7(_this.paramsProduct(_this.activeName,'brand'))
          _this.showEchart8(_this.paramsProduct(_this.activeName,'brand'))
          _this.showEchart91(_this.paramsProduct(_this.activeName,'brand'))
          _this.showEchart9(_this.paramsProduct(_this.activeName,'brand'))
          _this.getTopEcharts(_this.params(_this.activeName))
          this.getMiddleEcharts(this.paramsLocation(this.activeName))
        }
        if(_this.countIconBottom === 3){
          _this.brandValue = [item]
          _this.showEchart7(_this.paramsProduct(_this.activeName,'series'))
          _this.showEchart8(_this.paramsProduct(_this.activeName,'series'))
          _this.showEchart9(_this.paramsProduct(_this.activeName,'series'))
          _this.showEchart91(_this.paramsProduct(_this.activeName,'series'))
          _this.getTopEcharts(_this.params(_this.activeName))
          this.getMiddleEcharts(this.paramsLocation(this.activeName))
        }
        if(_this.countIconBottom > 3 ){
          _this.countIconBottom = 3
        }
      },
      changeComparisonYear() {
        this.getMiddleEcharts(this.paramsLocation(this.activeName))
        this.changeComparisonRadio()
      },
      changeProductYear() {
        this.getBottomEcharts(this.paramsProduct(this.activeName))
      }
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    mounted() {
      const _this = this
      this.loadAllSelect()
      this.initEchartsDom()
      // 初始化图表
      this.getTopEcharts(this.params(this.activeName))
      // this.getMiddleEcharts(this.paramsLocation(this.activeName))
      // this.getBottomEcharts(this.paramsProduct(this.activeName))
      // // 下钻图表
      // this.echartsObj.Echart4.on('click', function(params){
      //   if(params.name !== 'OTHER') {
      //     _this.getMiddleDrillData(params.name)
      //   }
      // })
      // this.echartsObj.Echart5.on('click', function(params){
      //   if(params.name !== 'OTHER') {
      //     _this.getMiddleDrillData(params.name)
      //   }
      // })
      // this.echartsObj.Echart6.on('click', function(params){
      //   if(params.name !== 'OTHER') {
      //     _this.getMiddleDrillData(params.name)
      //   }
      // })
      // this.echartsObj.Echart61.on('click', function(params){
      //   if(params.name !== 'OTHER') {
      //     _this.getMiddleDrillData(params.name)
      //   }
      // })
      // this.echartsObj.Echart7.on('click', function(params){
      //   if(params.seriesName !== 'OTHER'){
      //     _this.getBottomDrillData(params.seriesName)
      //   }
      // })
      // this.echartsObj.Echart8.on('click', function(params){
      //   if(params.seriesName !== 'OTHER'){
      //     _this.getBottomDrillData(params.seriesName)
      //   }
      // })
      // this.echartsObj.Echart9.on('click', function(params){
      //   if(params.seriesName !== 'OTHER'){
      //     _this.getBottomDrillData(params.seriesName)
      //   }
      // })
      this.echartsResize()
      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .loyaltyAnalysis {
    padding: 20px 46px;
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .reset {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: fixed;
      top: 55px;
      right: 5px;
      z-index: 10;
      /*background: linear-gradient(to bottom right,#8928f5,#2853f1);*/
      background: #0090e0;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 3px 12px #e0e2e9;
      i {
        line-height: 40px;
        font-size: 20px;
        color: #fff;
      }
    }
    .select-dimension {
      position: relative;
      height: 64px;
      background-color: #fff;
      .el-card {
        height: 64px;
      }
      .class-row {
        height: 90px;
        margin: 0 0 0 15px;
        padding-top: 15px;
        /*margin-bottom: 20px;*/
        /*line-height: 40px;*/
        .class-columns {
          display: flex;
          .class-column {
            margin-right:30px;
            .selectName{
              font-size: 14px;
              color: #15122f;
            }
          }
        }
        /*&:last-child {*/
          /*margin-bottom: 0;*/
        /*}*/
      }
      .class-title {
        font-size: 16px;
        color: #15122f;
      }
    }
    .main-content {
      margin-top: 20px;
      .echart-style {
        width: 100%;
        /*width:350px;*/
        height: 35vh;
        /*overflow-x: auto;*/
        /*overflow-y: hidden;*/
      }
      /*#Echart5,#Echart6{*/
        /*!*width: 100%;*!*/
        /*min-width:350px;*/
        /*height: 35vh;*/
        /*overflow-x: auto;*/
        /*overflow-y: hidden;*/
      /*}*/
      .module-title {
        padding: 0;
        margin: 20px 0;
        font-weight: bold;
        font-family:OpenSansShin;
        font-size:20px;
        color: #333;
      }
      h3 {
        font-weight: bold;
        font-size:16px;
        color: #666;
      }
      .returnIconMiddle,.returnIconBottom{
        position: absolute;
        right: 5px;
        top: 10px;
        cursor: pointer;
        .icon-fanhui {
          position: relative;
          z-index: 9999999999999;
          font-size: 20px;
          color: #1E90FF;
          margin-right: 5px;
        }
      }
    }
  }
</style>
